<template>
    <div class="turn-out">
        <van-nav-bar title="充值" right-text left-arrow @click-left="goBack">
            <i style="font-size:10px;color:#666" slot="right"></i>
        </van-nav-bar>
        
        <div class="content address">
            <div class="out">
                <span>*</span>
                <label for="balance">充币地址</label>
                <!-- <input type="text" id="coin-address" disabled> -->
                <p id="copyNum" style="background-color:#999;width:70%;padding-left:4px;box-sizing:border-box;line-height:24px;height:24px;color:#fff; overflow:hidden">{{cardUrl}}</p>
            </div>
            <!-- <textarea id="copyWord" style="width:0;height:0;border:0" disabled></textarea> -->
             <textarea id="copyWord"></textarea>
            <button type="button" class="add-btn" id="id_copy" @click="copys">点击复制</button>
            <div class="ewm">
               <img :src="cardUrlPic" alt="">
            </div>
        </div>
        <div class="explain">
            <div class="title">充币说明</div>
            <div class="con">
                <p>1、禁止向BTC地址充值除BTC之外的资产，任何充入BTC之外的资产，任何充入BTC地址的非BTC资产将不可找回；</p>
                <p>2、使用BTC地址充值需要6个网络确认才能到账；</p>
                <p>3、充值最小额度为0.00000001BTC，小于0.00000001BTC将无法到账；</p>
            </div>
        </div>


    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
import { Toast } from "vant";
import { NavBar} from "vant"
export default {
    components: {
        [NavBar.name]: NavBar,
        [Toast.name]: Toast,
    },
    data() {
        return {
            cardUrl:this.$route.params.url,
            cardUrlPic:this.$route.params.pic
        }
    },
    created(){
        console.log(this.$route)
    },
    methods: {
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },
        copys(){
            var num = document.getElementById('copyNum').innerHTML;
            var word = document.getElementById('copyWord');
            word.value = num;
            word.select();
            document.execCommand("copy");
             this.$toast('复制成功！');
        },
    }
}
</script>
<style lang="less" scoped>
.ewm{
    border: 1px solid #eee;
    width: 40%;
    margin: 10px auto;
    img{
        width: 100%;
    }
}
#copyWord{
    opacity: 0;
    position: fixed;
    left: -120%;
    height: -120%;
}
.turn-out {
    .content {
        border-bottom: 1px solid #ebedf0;
        .out {
            display: flex;
            padding: 10px 15px;
            text-align: left;
            font-size: 14px;
            color: #323233;
            label {
                margin-right: 14px;
            }
            input {
                flex: 1;
                border: 0;
            }
            span {
                display: inline-block;
                margin: 4px 5px 0 0;
                font-size: 1.2em;
                color: #D1A658;
            }
        }
    }
    .address {
        border-bottom: 0;
        input {
            background: #efefef;
        }
        .add-btn {
            margin-left: -80px;
            background: #fff;
            font-size: 12px;
            color: #D1A658;
            outline: none;
            border: 0;
        }
    }
    .confirm {
        padding: 35px 15px;
        font-size: 14px;
        color: #fff;
        .btn {
            padding: 10px;
            width: 100%;
            height: 1.07rem;
            border: 0;
            border-radius: 3px;
            background: #D1A658;
            outline: none;
        }
    }
    .explain {
        padding: 0 15px;
        text-align: left;
        font-size: 12px;
        color: #969799f5;
        .title {
            padding-bottom: 10px;
            font-size: 14px;
            color: #323233;
        }
        .con {
            p {
                padding-bottom: 10px;
            }
        }
    }
}

</style>
